<template>
  <div class="number-item">
    <p v-if="moduleItemData.name && (getTitleStyle() && !getTitleStyle().isHide)" :style="getTitleStyle()" class="item-header">{{ moduleItemData.name }}</p>
    <div class="item-value">
      <div v-for="(item, i) in changeValue()" :key="i" :style="item === ',' ? {...getContentStyle(), width: commaSty} :getContentStyle()" class="item">
        <span class="number">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { isNumber } from '@/utils/tools';
import { numberTextFormat, moneyFilter } from '@/filters/number.js';
export default {
  name: 'NumberItem',
  props: {
    // showAreaMaxHeight: {
    //   type: Number,
    //   default: 100
    // },
    rows: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    moduleItemData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    styleConfig() {
      return this.moduleItemData.styleConfig;
    },
    values() {
      return this.rows && this.rows.length > 0 ? this.rows[0] : [];
    },
    commaSty() {
      const width = this.getContentStyle().fontSize.replace('px', '');
      return Number(width) / 4 + 'px';
    }
  },
  methods: {
    getValue(format = true) {
      const value = this.values[0];
      if (format) {
        return value || isNumber(value)
          ? moneyFilter(numberTextFormat(value, 1), false)
          : '--';
      } else {
        return value || isNumber(value)
          ? moneyFilter(value, false)
          : value || '--';
      }
    },
    changeValue() {
      const moduleNum = this.moduleNumFun();
      this.values[0] = this.values[0] ? parseInt(this.values[0]) : 0;
      let value = 0;
      if (this.values[0] !== 0) {
        if (this.values[0].toString().length > moduleNum.number) {
          this.values[0] = this.values[0].toString().substring((this.values[0].toString().length - moduleNum.number), this.values[0].toString().length);
          value = moneyFilter(this.values[0]);
          return value.split('');
        } else if (this.values[0].toString().length < moduleNum.number) {
          const num = moduleNum.number - this.values[0].toString().length;
          let zore = '';
          for (let i = 0; i < num; i++) {
            zore += '0';
          }
          this.values[0] = zore + this.values[0];
          value = moneyFilter(this.values[0]);
          return value.split('');
        } else {
          value = moneyFilter(this.values[0]);
          return value.split('');
        }
      } else {
        value = moneyFilter(this.values[0].toString());
        return value.split('');
      }
    },
    /**
     * 自定义样式
     */
    getTitleStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTitleSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.moduleName };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    getContentStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTextSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.numberContent };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    moduleNumFun() {
      const moduleNumber = {};
      const styleConfig = this.styleConfig;
      if (styleConfig && styleConfig instanceof Array) {
        this.styleConfig.map(item => {
          if (item.title === '展示位数：') {
            item.config.forEach(val => {
              moduleNumber[val.word] = val.value;
            });
          }
        });
        return moduleNumber;
      } else if (styleConfig && styleConfig instanceof Object) {
        return styleConfig.showBit;
      }
    },
    moduleTitleSy() {
      const moduleTitleStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '模块名称：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTitleStyle[val.word] = val.value;
          });
        }
      });
      return moduleTitleStyle;
    },
    moduleTextSy() {
      const moduleTextStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '内容文字：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              // moduleTextStyle.width = val.value / 2 + 'px';
              moduleTextStyle.marginRight = val.value / 11 + 'px';
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTextStyle[val.word] = val.value;
          });
        }
      });
      return moduleTextStyle;
    }
  }
};
</script>
<style lang="scss" scoped>
.number-item {
  &.flex-wrap {
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .item-header {
    font-size: 20px;
    font-weight: bolder;
    color: rgba(153, 153, 153, 1);
    margin: 0 0 16px;
  }
  .item-value {
    font-size: 32px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    // margin: 15px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .item {
      margin-right: 6px;
      flex-shrink: 0;
      .number {
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        font-weight: bolder;
        z-index: 100;
      }
    }
  }
}
</style>
